<template>
  <div class='little-block' :style="{color:comColor,fontSize:comFontSize,background:comBackground}" >
    {{value?value:''}}
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      styleMap: {
        0: 'transparent',
        2: '#F5DEB3',
        4: '#F5DEB3',
        8: '#FF8247',
        16: '#EE6A50',
        32: '#FF6347',
        64: '#EE4000',
        128: '#DD4000',
        256: '#EE2000',
        512: '#1E90FF',
        1024: '#40E0D0',
        2048: '#EEB422',
        4096: '#333333'
      }
    }
  },
  computed: {
    comFontSize () {
      const _value = this.value
      if (_value < 100 && _value > 0) {
        return '36px'
      } else if (_value >= 100 && _value < 1000) {
        return '26px'
      } else if (_value === 0) {
        return '0px'
      } else {
        return '22px'
      }
    },
    comBackground () {
      return this.styleMap[this.value] || '#111111'
    },
    comColor () {
      if (this.value < 8) {
        return '#625009'
      } else {
        return '#fefefe'
      }
    }
  }
}
</script>

<style>
.little-block{
  font-weight: 600;
  border-radius: 6px;
  height: 62px;
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;

}
.color-w{
  color: #fefefe;
}


</style>
